<template>
    <div class="configure">
        <el-title :title="title"></el-title>
        <div class="configure_cn">
             <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="单位管理" name="first">
                    <el-button style="background:#31bdce;margin-bottom:20px;color:white" @click="dialogVisible = true">新增单位管理</el-button>
                     <el-table
                        :data="quyuDate"
                        style="width: 100%;margin-bottom: 20px;"
                        row-key="dept_id"
                        border
                        :default-expand-all="false"
                        :tree-props="{children: 'childer', hasChildren: 'hasChildren'}">
                        <el-table-column
                        prop="dept_id"
                        label="编号"
                        sortable
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="dept_name"
                        label="单位分类"
                        sortable
                        width="">
                            <template slot-scope="scope">
                                <span>{{scope.row.dept_name}} <span v-if="member == 2">({{scope.row.childer.length}})</span></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="quyuedit(scope.row)">编辑</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="栏目分类" name="two" v-if="member == 2">
                    <el-button style="background:#31bdce;margin-bottom:20px;color:white" @click="newAdd">新增新闻分类</el-button>
                    <el-table
                        :data="tableData"
                        style="width: 100%;margin-bottom: 20px;"
                        row-key="id"
                        border
                        default-expand-all
                        :tree-props="{children: 'childer', hasChildren: 'hasChildren'}">
                        <el-table-column
                        prop="id"
                        label="编号"
                        sortable
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="新闻分类名称"
                        sortable
                        width="">
                        </el-table-column>
                        <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                            <el-button @click="detele(scope.row)" type="text" size="small" style="color:red;">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="清单事项名称" name="three" v-if="member == 2">
                    <el-button style="background:#31bdce;margin-bottom:20px;color:white" @click="newlist">新增清单事项</el-button>
                    <div class="search">
                        <input type="text" v-model="search" @keyup.enter="onSearch" style="width:230px;margin-bottom:20px;">
                        <button @click="onSearch">搜索</button>
                    </div>
                    <el-table
                        :data="tablelist"
                        style="width: 100%;margin-bottom: 20px;"
                        row-key="id"
                        border
                        default-expand-all
                        :tree-props="{children: 'child', hasChildren: 'hasChildren'}">
                        <el-table-column
                        prop="id"
                        label="编号"
                        sortable
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="className"
                        label="权力类型"
                        sortable
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="清单事项名称"
                        sortable
                        width="">
                        </el-table-column>
                        <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="listEdit(scope.row)">编辑</el-button>
                            <el-button @click="listdet(scope.row)" type="text" size="small" style="color:red;">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                        <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage1"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="10"
                        layout="total, prev, pager, next"
                        style="text-align: right;margin-top:20px"
                        :total="totals">
                        </el-pagination>
                </el-tab-pane>
                <!-- 清单事项类别 -->
                <el-tab-pane label="事项类别" name="four" v-if="member == 2">
                    <el-button style="background:#31bdce;margin-bottom:20px;color:white" @click="qingdan = true">新增事项类别</el-button>
                    <el-table
                        :data="danData"
                        border
                        style="width: 100%">
                        <el-table-column
                        fixed
                        prop="class_id"
                        label="编号"
                        width="150">
                        </el-table-column>
                        <el-table-column
                        prop="class_name"
                        label="清单事项名称"
                        width="">
                        </el-table-column>
                        <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                        <template slot-scope="scope">
                            <el-button @click="danDeit(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="danDet(scope.row)" type="text" size="small" style="color:red">删除</el-button>
                        </template>
                        </el-table-column>
                        
                    </el-table>
                        <el-pagination
                        @current-change="handleCurrentChanged"
                        :current-page.sync="currentPage1"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="10"
                        layout="total, prev, pager, next"
                        style="text-align: right;margin-top:20px"
                        :total="totalsd">
                        </el-pagination>
                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- 栏目分类 -->
        <el-dialog
        title="新闻分类"
        class="newDate"
        :visible.sync="drawer"
        width="30%">
            <el-form :model="newClass" status-icon :rules="rules" ref="newClass" label-width="100px" class="demo-newClass">
            <el-form-item label="分类名称" prop="name">
                <el-input type="text" v-model="newClass.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属栏目" prop="class">
                <el-select v-model="newClass.class" placeholder="请选择">
                    <el-option
                    v-for="(item,index) in options"
                    :key="index"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="newSubmit('newData')">提交</el-button>
        </span>
        </el-dialog>
        
        <!-- 清单事项 -->
        <el-dialog
        title="清单事项"
        :visible.sync="drawerd"
        width="40%">
            <el-form :model="newData" status-icon :rules="rules" ref="newData" label-width="100px" class="demo-newData">
                <el-form-item label="权力类型" prop="sort">
                    <el-select v-model="newData.sort" placeholder="请选择">
                        <el-option
                        v-for="(item,index) in thisnewClass"
                        :key="index"
                        :label="item.class_name"
                        :value="item.class_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="清单事项名称" prop="name">
                    <el-input type="text" v-model="newData.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="事项内容" prop="class">
                    <el-input type="textarea" v-model="newData.class"></el-input>
                </el-form-item>
            </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="listSubmit('newData')">提交</el-button>
        </span>
        </el-dialog>

        <!-- 事项类别 -->
        <el-dialog
        title="事项类别"
        :visible.sync="qingdan"
        width="40%">
            <el-form :model="danclass" status-icon :rules="rules" ref="danclass" label-width="100px" class="demo-newClass">
            <el-form-item label="事项类别" prop="name">
                <el-input type="text" v-model="danclass.name" autocomplete="off"></el-input>
            </el-form-item>
            </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="clasSubmit('danclass')">提交</el-button>
        </span>
        </el-dialog>

         <!-- 村级区域 -->
        <el-dialog
          title="新增村级区域"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <el-form :model="quyuForm" status-icon :rules="rules" ref="quyuForm" label-width="80px" class="demo-quyuForm">
            <el-form-item label=" 部门名称" prop="dept_name">
              <el-input type="text" v-model="quyuForm.dept_name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上级镇街" prop="p_id">
              <el-select v-model="quyuForm.p_id" placeholder="请选择">
                <el-option
                  v-for="item in quyuList"
                  :key="item.value"
                  :label="item.dept_name"
                  :class="{'activeTwo' : item.dept_id != 2}"
                  :value="item.dept_id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="quyu('quyuForm')">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
    </div>
</template>
<script>
import elTitle from '@/components/title'
import {itemName,itemNameDel,deptcreate,deptedit,userInfo,deptinfo,itemNameList,itemNameQuery,deptlist,newsCatAdd,optionsList,optionsDel,optionsQuery,apiclasslist,projectclass,classDeld,classAlld,projectmain} from '@/utils/index.js'
export default {
    data(){
        return{
            title:'网站配置',
            dialogVisible:false,
            quyuForm:{
                dept_name:'',
                p_id:'',
                dept_id:'',
            },
            newData: {
                sort:'',
                name: '',
                class: '',
            },
            newClass:{
                name: '',
                class: '',
            },
            ruleForm: {
                name: '',
                copyright: '',
                record: ''
            },
            danclass:{
                name:''
            },
            options:[],
            rules: {},
            activeName: 'first',
            tableData: [],
            tablelist:[],
            danData:[],
            search:'',
            drawer: false,
            drawerd:false,
            qingdan:false,
            rowId:'',
            newPid:'',
            currentPage1: 1,
            totals:0,
            danId:'',
            totalsd:0,
            thisnewClass:[],
            quyuList:[],
            quyuDate:[],
            member:'',
            d_id:'',
            realname:''
        }
    },
    components:{
        elTitle,
    },
    created(){
        userInfo().then((res)=>{
            console.log(res)
            this.member = res.data.member
            this.d_id = res.data.d_id
            this.realname = res.data.realname

            deptlist({type:'list',deptid:this.d_id}).then((res)=>{
                console.log(res)
                if(this.member == 2){
                    res.data.forEach((item)=>{
                        if(item.level == 1){
                            this.quyuList.push(item)
                        }
                    })
                    this.quyuList.unshift({dept_name:'镇街',dept_id:2})
                }else{
                    this.quyuList.push({dept_name:this.realname,dept_id:this.d_id})
                }
            })
            deptlist({type:'tree',deptid:this.d_id}).then((res)=>{
                if(this.member == 2){
                    this.quyuDate = res.data[1].childer
                }else{
                    this.quyuDate = res.data
                }
            })
        })

        
        // 获取事项
        itemNameList().then((res)=>{
            this.tablelist = res.data.data
            this.totals = res.data.total
        })
        // 主分类事项
        classAlld().then((res)=>{
            console.log(res)
            this.thisnewClass = res.data
        })
        // 事项类别
        apiclasslist().then((res)=>{
            console.log(res)
            this.danData = res.data.data
            this.totalsd = res.data.total
        })
        // 获取新闻分类
        optionsList().then((res)=>{
            console.log(res)
            // this.options = res.data
            res.data.forEach((item)=>{
                this.options.push(item)
                if(item.childer != undefined){
                    item.childer.forEach((item1)=>{
                        this.options.push(item1)
                    })
                }
            })
            console.log(this.options)
            this.tableData = res.data
        })

        projectmain().then((res)=>{
            console.log(res)
        })
    },
    methods:{
        quyuedit(row){
            console.log(row)
            this.quyuForm.dept_id = row.dept_id
            this.dialogVisible=true
            
            deptinfo({dept_id:row.dept_id}).then((res)=>{
                console.log(res)
                this.quyuForm.dept_name = res.data.dept_name
                this.quyuForm.p_id = res.data.p_id
            })
        },
        quyu(){
            if(this.quyuForm.dept_id != ''){
                deptedit(this.quyuForm).then((res)=>{
                    if(res.code == 0){
                        this.$message.success('编辑成功')
                        deptlist({type:'tree'}).then((res)=>{
                            console.log(res.data)
                            this.quyuDate = res.data[1].childer
                        })
                        this.dialogVisible=false
                        
                    }else{
                        this.$message.warning(res.msg)
                    }
                })
            }else{
                
                deptcreate(this.quyuForm).then((res)=>{
                    console.log(res)
                    if(res.code == 0){
                        this.$message.success('添加成功')
                        window.location.reload();
                        deptlist({type:'tree'}).then((res)=>{
                            console.log(res.data)
                            this.quyuDate = res.data[1].childer
                        })
                        this.dialogVisible=false
                        
                    }else{
                        this.$message.warning(res.msg)
                    }
                })
            }
            
        },
        handleClose(){
        this.dialogVisible=false
    },
        handleCurrentChanged(val){
            apiclasslist({
                page:val
            }).then((res)=>{
                this.danData = res.data.data
                this.totalsd = res.data.total
            })
        },
        // 事项类别
        clasSubmit(){
            console.log(this.danId)
            if(this.danId == ''){
                projectclass({
                    class_name:this.danclass.name
                }).then((res)=>{
                    if(res.code == '0'){
                        this.$message.closeAll()
                        this.$message.success('添加成功')
                        // 事项类别
                        apiclasslist().then((res)=>{
                            this.danData = res.data.data
                            this.totalsd = res.data.total
                        })
                        this.qingdan = false
                    }else{
                        this.$message.closeAll()
                        this.$message.warning(res.msg)
                    }
                })
            }else{
                projectclass({
                    class_id:this.danId,
                    class_name:this.danclass.name
                }).then((res)=>{
                    if(res.code == '0'){
                        this.$message.closeAll()
                        this.$message.success('修改成功')
                        // 事项类别
                        apiclasslist().then((res)=>{
                            this.danData = res.data.data
                            this.totalsd = res.data.total
                        })
                        this.danId = ''
                        this.qingdan = false
                    }else{
                        this.$message.closeAll()
                        this.$message.warning(res.msg)
                    }
                })
            }
        },
        // 事项分类删除
        danDet(row){
            this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                classDeld({
                    class_id:row.class_id
                }).then((res)=>{
                    if(res.code == '0'){
                    this.$message.closeAll()
                    this.$message.success('删除成功')
                    // 事项类别
                    apiclasslist().then((res)=>{
                        this.danData = res.data.data
                        this.totalsd = res.data.total
                    })
                    this.qingdan = false
                }else{
                    this.$message.closeAll()
                    this.$message.warning(res.msg)
                }
                })
            }).catch(() => {});
        },
        // 事项分类
        danDeit(row){
            console.log(row)
            this.danId = row.class_id
            this.qingdan = true
        },
        // 分类
        handleCurrentChange(val){
            // 获取事项
            itemNameList({
                page:val
            }).then((res)=>{
                this.tablelist = res.data.data
            })
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //搜索
        onSearch(){
            itemNameList({name:this.search}).then((res)=>{
                this.tablelist = res.data.data
            })
        },
        //表格操作
        handleClickd(row) {
            console.log(row);
        },
        newAdd(){
            this.drawer = true
            for(let key in this.newClass){
                this.newClass[key]  = ''
            }
        },
        newSubmit(){
            console.log(this.rowId)
            if(this.rowId == ""){
                // 新增分类
                newsCatAdd({
                    name:this.newClass.name,
                    pid:this.newClass.class
                }).then((res)=>{
                    if(res.code == '0'){
                        this.$message.closeAll()
                        this.$message.success('添加成功')
                        // 获取新闻分类
                        optionsList().then((res)=>{
                            this.options = res.data
                            this.tableData = res.data
                        })
                        this.drawer = false
                    }else{
                        this.$message.closeAll()
                        this.$message.warning(res.msg)
                    }
                })
            }else{
                // 编辑分类
                newsCatAdd({
                    id:this.rowId,
                    name:this.newClass.name,
                    pid:this.newClass.class
                }).then((res)=>{
                    if(res.code == '0'){
                        this.$message.closeAll()
                        this.$message.success('添加成功')
                        // 获取新闻分类
                        optionsList().then((res)=>{
                            this.tableData = res.data
                        })
                        this.drawer = false
                    }else{
                        this.$message.closeAll()
                        this.$message.warning(res.msg)
                    }
                })
            }
        },
        //删除
        detele(row){
            console.log(row);
            this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                optionsDel({
                    id:row.id
                }).then((res)=>{
                if(res.code == '0'){    
                    this.$message.closeAll()
                    this.$message.success('添加成功')
                    // 获取新闻分类
                    optionsList().then((res)=>{
                        console.log(res)
                        this.tableData = res.data
                    })
                    this.drawer = false
                }else{
                    this.$message.closeAll()
                    this.$message.warning(res.msg)
                }
                })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        edit(row){
            console.log(row);
            this.drawer = true
            this.rowId = ''
            this.rowId = row.id
            optionsQuery({
                id:row.id
            }).then((res)=>{
                console.log(res)
                this.newClass.name = res.data.name
                this.newClass.class = res.data.pid == '0' ? '' : res.data.pid
            })
        },
        // 清单操作
        newlist(){
            this.drawerd = true
            for(let key in this.newData){
                this.newData[key]  = ''
            }
        },
        listdet(row){
            console.log(row);
            this.$confirm('此操作将永久删除该清单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                itemNameDel({id:row.id}).then((res)=>{
                    if(res.code == '0'){
                        this.$message.closeAll()
                        this.$message.success('删除成功')
                        itemNameList().then((res)=>{
                            this.tablelist = res.data.data
                        })
                    }else{
                        this.$message.closeAll()
                        this.$message.warning(res.msg)
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        listSubmit(){
            console.log(this.rowId)
            itemName({
                id:this.rowId,
                pid:this.newData.sort,
                name:this.newData.name,
                content:this.newData.class
            }).then((res)=>{
                if(res.code == '0'){
                    this.$message.closeAll()
                    this.$message.success('添加成功')
                    itemNameList().then((res)=>{
                        this.tablelist = res.data.data
                        this.currentPage1 = 1
                    })
                    this.drawerd = false
                }else{
                    this.$message.closeAll()
                    this.$message.warning(res.msg)
                }
                // 无论成功或者失败，清除 编辑id
                this.rowId = ''
            })
        },
        listEdit(row){
            console.log(row);
            this.drawerd = true
            this.rowId = ''
            this.rowId = row.id
            itemNameQuery({id:row.id}).then((res)=>{
                console.log(res)
                this.newData.sort = res.data.p_id,
                this.newData.name = res.data.name,
                this.newData.class = res.data.content
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.newClass::v-deep{
    .el-drawer{
        width: 60% !important;
    }
}
.configure_cn::v-deep{
    margin-top: 15px;
    background-color: white;
    padding: 50px 50px 30px 30px;
    .el-tabs__header{
        margin-bottom: 40px;
    }
}
.search{
    float: right;
    font-size: 0;
    // border: 1px solid #ccc;
}
.search input{
    height: 36px;
    vertical-align: top;
    border: 0;
    outline: none;
    padding: 0 7px;
    font-size: 14px;
    border: 1px solid #ccc;
}
.search button{
    height: 38px;
    border: 0;
    padding: 0 20px;
    background-color: #31bdce;
    color: white;
}
.search button:hover{
    cursor: pointer;
}
.demo-newData::v-deep{
    .el-select{
        width: 100%;
    }
    .el-textarea__inner{
        height: 150px;
    }
}
.newDate::v-deep{
    .el-dialog__body{
        padding-right: 50px;
    }
}
.el-select{
    width: 100%;
    
}
.activeTwo{
    margin-left: 25px;
}
</style>